<template>
<div id="scrollList">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">{{type=='1'?'待提货':'待交货'}}</h2>
  </header>
  <div class="displayflex top-bar-w">
    <div class="top-bar-c flex1">
      <i class="iconfont icon-sech"></i> 
      <div class="ipt"><input type="text" placeholder="输入订单号" v-model="bbillno"></div>
    </div> 
    <div class="btn-sech" @click="resetGet()">搜索</div>
  </div>
  <scroller lock-x height="-52" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">
  <div>
    <div class="list-warp" v-for="item in todolist">
      <div class="list-ctx" @click="goDetail(item.BBillGuid)">
        <div class="head cf ft14">
          <p class="f-l">{{item.BBillNo}}</p>
          <span class="f-r">{{type=='1'?'待提货':'待交货'}}</span>
        </div>
        <div class="grab-wrap">
          <div class="addr ft17"><span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</div>
          <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</div>
          <div class="statis ft14 displayflex">
            <span>{{item.OrdersVolumn}}m³，{{item.OrdersWeight}}kg，共{{item.OrdersPKGS}}件</span>
            <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{item.CarrierAmount | DriverFee}}</span></div>
          </div>
          <div class="ft14" v-if="type==1">最晚提货时间：<span class="org">{{item.CollectionTime | ydmhm}}</span></div>
          <div class="ft14">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | ydmhm}}</span></div>
          
          <template v-if="type==1">
            <div class="ft14">距离最晚提货时间仅剩：<span class="org">{{item.CollectionTime | DateTransformation}}</span></div>
          </template>
          
          <template v-if="type==2">
            <div class="ft14">距离截至时间仅剩：<span class="red">{{item.LastArrivalArrivedDate | DateTransformation}}</span></div>
          </template>
        </div>
        <div class="icon-tag" v-if="item.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
      </div>
      <div class="list-btn">
        <div class="btn btn-sm" @click="goDetail(item.BBillGuid)">订单详情</div>
        <div class="btn btn-sm" v-if="type=='1'" @click="goLink(item.BBillGuid)">拍照取货</div>
        <div class="btn btn-sm" v-if="type=='1'" @click="">确认到达</div>
        <div class="btn btn-sm" v-if="type=='2'" @click="goLink(item.BBillGuid)">交货确认</div>
      </div>
    </div>
  </div>
  <p class="txt-bottom" v-if="totalLength == todolist.length"><em class="txt">我是有底线的</em></p>
  </scroller>
  <div class="noDate_page" v-if="todolist.length<=0">
    <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
    未找到相关数据
  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      todolist: [],
      showLoad: false,
      State: '',
      bbillno: '',
      count:0,
      pageindex:1,
      totalLength:0,
    }
  },
  computed:{
    type(){
      var val = this.$route.query.type;
      return val.toString();
    },
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  created() {
    this.getData();
    var title = '';
    switch (this.type){
      case '1':
        title = '待提货';
        break;
      case '2':
        title = '在途';
        break;
    }
    document.title = title; 
  },
  watch:{
    bbillno(val){
      if(!val){
        this.resetGet();
      }
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    goLink(id){
      this.$router.push({
        path:'/pickUp',
        query:{
          id:id,
          step:this.type
        }
      });
    },
    goDetail(id){
      this.$router.push({
        path:'/orderDetail',
        query:{id:id}
      })
    },
    resetGet(){
      this.todolist = [];
      this.count=0;
      this.pageindex=1;
      this.getData();
    },
    onScrollBottom () {
      this.count++;
      if(this.count==1){
        this.getData();
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      };
    },
    getData(){
      var _this = this;
      if(this.type == 1){
        _this.State = 51;
      } else {
        _this.State = 52;
      };
      var query = {
        BBillNo: _this.bbillno,
        DriverGuid: this.userinfo.StaffID,
        State: _this.State,
        PageIndex:this.pageindex,
        PageSize:8
      };      
      _this.showLoad = true;
      
      _this.Ajax.post('SearchTakableOrderList',query).then(function(resp){
        _this.showLoad = false;
        if(resp.IsSuccess){
          var result = resp.Datas;
          if(result.length > 0){
            _this.todolist=_this.todolist.concat(result);
            _this.pageindex++;
            _this.count = 0;
          };
          _this.totalLength = resp.TotalRecords;
        }
      });
    },
  }
}
</script>